<script setup lang="ts">
import {useQuestionStore} from "@/stores/question";
import {uniqueId} from "lodash";
import {QuestionType} from "@/enums";
import {QUESTION_ID} from "@/constants";
import {ref} from "vue";

import SvgIcon from "@/components/icon/svg-icon.vue";
import type {Question} from "@/types/schema.ts";

const questionStore = useQuestionStore();

const addQuestion = (item: Question) => {
  questionStore.addQuestion({
    uniqueId: uniqueId(QUESTION_ID),
    type: item.type,
    title: '标题',
    options: [
      {value: '1', label: '篮球'},
      {value: '2', label: '羽毛球'},
      {value: '3', label: '乒乓球'},
      {value: '4', label: '写代码'},
    ]
  })
}

const questions = ref([
  {
    icon: 'input',
    name: '输入框',
    type: QuestionType.INPUT,
  },
  {
    icon: 'radio',
    name: '单选框',
    type: QuestionType.RADIO,
  },
  {
    icon: 'checkbox',
    name: '多选框',
    type: QuestionType.CHECKBOX,
  },
  {
    icon: 'slider',
    name: '滑块',
    type: QuestionType.SLIDER,
  },
  {
    icon: 'rate',
    name: '评分',
    type: QuestionType.RATE,
  },
])
</script>

<template>
  <div class="question-select-container">
    <ul>
      <li v-for="item in questions" :key="item.icon" @click="addQuestion(item)">
        <SvgIcon :name="item.icon" alt=""/>
        <div>{{ item.name }}</div>
      </li>
    </ul>
  </div>
</template>

<style scoped lang="less">
.question-select-container {
  position: fixed;
  left: 20px;
  top: 30px;
}

ul {
  li {
    width: 100px;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #fff;
    color: #000;
    cursor: pointer;
    user-select: none;
  }
}
</style>